<template>
    <div class="process-monitoring-box">
        <commpVxeTable
         :key="tableKey"
         :isCanWrap="true"
         :occupancyHeight="occupancyHeight"
         :config="dataTableConfig"
         :columns="columnsVxe"
         :formItem="formItem"
         :searchType="true"
         :tablePadding="tablePadding"
         ref="acceptanceRegistrationRef"
         >
            <template v-slot:fsxmc_name="{row}" data-desc="自定操作栏">
                <!-- <span v-if="row.flcsfkb == '不可办'" class="fsxmcQ-c-t">[等待中]</span>
                <span v-if="row.fzwxtbzzt == '提前办'" class="fsxmcQ-l-t">[优先办]</span> -->
                <span v-if="row.fxzspzt == '日常审评'" style="padding: 0 5px;background-color: #1ab394;color: #fff;border-radius: 5px;">专项</span>
                <span v-if="row.fzwxtbzzt == '补正中'" class="fsxmcQ-red-t">[{{ row.fzwxtbzzt }}]</span>
                <span v-if="row.fzwxtbzzt == '已补正'" class="fsxmcQ-sl-t">[{{ row.fzwxtbzzt }}]</span>
                <span v-if="row.fzwxtzgzt == '整改中'" class="fsxmcQ-c-t">[{{ row.fzwxtzgzt }}]</span>
                <span v-if="row.fzwxtzgzt == '已整改'" class="fsxmcQ-l-t">[{{ row.fzwxtzgzt }}]</span>

                <!--<span v-if="row.fzwxtcjzt == '撤件回复'" class="fsxmcQ-h-t" @click="cjhfClick()">[{{ row.fzwxtcjzt }}]</span>
                <span v-if="row.fzwxtcjzt == '撤件审核中'" class="fsxmcQ-c-t">[{{ row.fzwxtcjzt }}]</span>
                <span v-if="row.fzwxtcjzt == '已撤件'" class="fsxmcQ-l-t">[{{ row.fzwxtcjzt }}]</span> -->

                <span v-if="row.fzwxtthzt" class="fsxmcQ-h-t">{{ row.fzwxtthzt }}</span>
                <a href="#" @click="handleClick(row)">{{ row.fsxmc }}</a>
            </template>
            <template v-slot:fhjmc_name="{row}" >
                {{ row.fhjmc == '现场检查'?'技术审查':row.fhjmc }}
            </template>
            <template v-slot:name_fslsj="{row}" data-desc="自定操作栏">
                <span>{{ timeProcessing(row.fslsj) }}</span>
            </template>
            <template v-slot:name_ffssj="{row}" data-desc="自定操作栏">
                <span>{{ row.ffssj }}</span>
            </template>
            <template v-slot:operation_btn="{row}">
                <a-form layout="inline" class="search-form" >
                    <a-form-item >
                        <a-button class="blue-btn" type="primary" @click="handleClick(row)" icon="edit">办理</a-button>
                    </a-form-item>
                    <!-- <a-form-item v-if="row.fhjmc == '方案制定'">
                        <a-button :disabled="row.fybmzt" :class="row.fybmzt?'':'blue-btn'" type="primary" @click="includeInThePlanClick(row)">列入计划</a-button>
                    </a-form-item>
                    <a-form-item v-if="row.fhjmc == '综合评定' &&　row.fhbsxzt !== 1">
                        <a-button class="blue-btn" type="primary" @click="reimburseClick(row)">申请报销</a-button>
                    </a-form-item> -->
                    <a-form-item v-if="row.fhjmc == '技术审评'">
                        <a-button class="blue-btn" type="primary" @click="returnClick(row)">退回</a-button>
                    </a-form-item>
                    <a-form-item v-if="row.fxzspzt == '日常监管'&& row.fhjmc == '任务受理'">
                        <a-button class="red-btn" type="primary" @click="deletionClick(row)" icon="delete">删除</a-button>
                    </a-form-item>
                </a-form>
            </template>
        </commpVxeTable>
        <handlingPage ref="handlingPageRef" @successReturn="successReturn" />
        <reimbursementModel ref="reimbursementModelRef" />
        <forecastNameTaskAddInspectionTask ref="forecastNameTaskAddInspectionTaskRef" @addInspectionTaskSuccess="addInspectionTaskSuccess"/>

        <processingConditionsAll ref="processingConditionsAllRef" :processingData="processingData" @interfaceSuccessful="interfaceSuccessful"></processingConditionsAll>
    </div>
</template>
<script>
import assessCheckApi from './service/api'
import commpVxeTable from '@/components/commp-vxe-table/commp-vxe-table.vue'
import blobType from '@/common/blobType'
import moment from 'moment'
import handlingPage from './handlingPage.vue'
import reimbursementModel from '../../n-1-inspectorManage/expenseReimbursement/reimbursementModel.vue'
import forecastNameTaskAddInspectionTask from '../forecastNameTask/addInspectionTask.vue'
import {
    queryJobByJobIdServe,
    getSqsxBm,
    spcyGetJobConcernByJobId,
    spcydelRwdjJob,
} from './service/index'

export default {
    components:{
        commpVxeTable,
        handlingPage,
        reimbursementModel,
        forecastNameTaskAddInspectionTask,
    },
    props:{
        occupancyHeight: {
            type: Number,
            default: 0,
            require: false,

        },
        tablePadding: {
            type: String,
            default: '',
            require: false,

        },
    },
    data(){
        return{
            tableKey:null,
            formItem:[{
                label: '关键字',
                model: 'sxcxgjz',
                searchType:'展开',
            },{
                label: '事项名称',
                model: 'fsxmc',
                searchType:'收起',
            },{
                label: '申请单位名称',
                model: 'fqymc',
                searchType:'收起',
            },{
                label: '环节名称',
                model: 'fhjmc',
                placeholder: '环节名称',
                type:'Select',
                dictionaryType:'查验流程环节名称',
                searchType:'收起',
            },{
                label: '发送人',
                model: 'ffsrmc',
                searchType:'收起',
            },{
                label: '所属科室',
                model: 'fywflname',
                placeholder: '所属科室',
                type:'Select',
                dictionaryType:'科室业务分类',
                searchType:'收起',
            },{
                label: '接收时间',
                model: ['slkssj','sljssj'],
                type:'rangePicker',
                format:'YYYY-MM-DD',
                searchType:'收起',
            }],//rangePicker
            columnsVxe:[
            {
                type: 'checkbox',
                width: 60 ,
                fixed: 'left'
            },{
                title: '事项名称', //列头显示文字
                field: 'fsxmc',
                align:'left',
                slots: {
                    default: 'fsxmc_name',
                },
                sortable:true,//排序
                // titleInterval:true,//两个字间隔
            },{
                title: '申请单位名称', //列头显示文字
                field: 'fqymc',
                align:'left',
            }
            // ,{
            //     title: '申请单号',
            //     field: 'fsqdbh',
            // }
            ,{
                title: '任务编号',
                field: 'fslbh',
                width:90,
            },{
                title: '当前环节',
                field: 'fhjmc',
                slots: {
                    default: 'fhjmc_name',
                },
                width:90,
            },{
                title: '发送人',
                field: 'ffsrmc',
                width:90,
            },{
                title: '经办科室',
                field: 'fywflname',
            },{
                title: '剩余天数',
                field: 'syday',
                width:90,
            },{
                title: '接收时间',
                field: 'fslsj',
                slots: {
                    // 使用插槽模板渲染
                    default: 'name_fslsj',
                },
                width:110,
            },
            // {
            //     title: '流程状态',
            //     field: 'flczt',
            // },
            {
                title: '操作',
                field: 'id',
                slots: {
                    // 使用插槽模板渲染
                    default: 'operation_btn',
                },
                fixed: 'right',
                width:182
            }],
            dataTableConfig:{
                api: assessCheckApi.list,
                rowId: 'jobid',
                fywflcode:blobType.fywflcodeArr[blobType.menuType.indexOf(this.$route.name.substring(this.$route.name.indexOf('__'),this.$route.name.indexOf('_a')+2))],
                paramet:{
                    // onlyCurrentUser:false,
                    // fblzt:'待办'
                }
            },
            processingData:{}
        }
    },
    watch:{

    },
    mounted(){
        this.$nextTick(()=>{
            setTimeout(()=>{
                // this.guideFuntion()
            },200)
        })
    },
    methods:{
        guideFuntion(){
            this.$nextTick(() => {
                //console.log('=======DOM更新完成===========')
                // DOM更新完成后执行的代码
                const myElement = document.querySelector('#toDoList-1');
                // const myElement1 = document.querySelector('.ant-layout-has-sider');
                //console.log('=======没有吗===========',myElement)
                if (myElement) {
                    //console.log('=======有===========',myElement)
                    // 对myElement进行操作
                    introJs('.ant-layout-has-sider').setOptions({
                        steps: [
                            {
                                element: '#toDoList-1',
                                // element: document.querySelector('#step1'),
                                title: '申请报销',
                                intro: '审评报销点此按钮进入',
                                // position: 'left'  // 提示框的位置
                            },
                        ],
                        exitOnOverlayClick: false, // 点击遮罩层时不退出介绍
                        exitOnEsc: false, // 按Esc键时不退出介绍
                        nextLabel: '下一步', // 自定义“下一步”按钮文本
                        prevLabel: '上一步', // 自定义“上一步”按钮文本
                        skipLabel: '跳过', // 自定义“跳过”按钮文本
                        doneLabel: '结束' // 自定义“结束”按钮文本
                        // 其他配置根据需要设置
                    }).start()
                }
            });
        },
        cjhfClick(){
            this.$route.push('/enterpriseWithdrawalApplication/index')
        },
        timeProcessing(val){
            if(val){
                val = val.slice(0,11)
            }
            return val
        },
        handleClick(row){
            //console.log(row)
            this.$refs.handlingPageRef.getData(row)
        },
        //列入计划
        includeInThePlanClick(row){
            spcyGetJobConcernByJobId({jobid:row.jobid}).then(res=>{
                if(res.code == 200){
                    //console.log(res.result.sqsx)
                    let sqsx = res.result.sqsx
                    this.$refs.forecastNameTaskAddInspectionTaskRef.getData({
                        fcykssj:sqsx.fcykssj,
                        fcyjssj:sqsx.fcyjssj,
                        sqsxid:row.sqsxid
                    },{})
                    this.$refs.forecastNameTaskAddInspectionTaskRef.visible = true
                }else{
                    this.$message.warning(res.message)
                }
            })
        },
        deletionClick(row){//
            var that = this
            this.$confirm({
                title:'您确认要删除吗？',
                // icon: createVNode(ExclamationCircleOutlined),
                onOk() {
                    spcydelRwdjJob({jobids:row.jobid}).then(res=>{
                        if(res.code == 200){
                            that.$message.success('删除成功')
                        }else{
                            that.$message.warning(res.message)
                        }              
                        that.$refs.acceptanceRegistrationRef.searchEvent()
                    })
                },
                
            });
            
            
        },
        addInspectionTaskSuccess(){
            this.successReturn()
        },
        reimburseClick(row){
            this.$refs.reimbursementModelRef.getData({sqsxid:row.sqsxid,view:false,heightType:'model'})
            this.$refs.reimbursementModelRef.visible = true
        },
        returnClick(row){
            //console.log(row)
            this.$refs.processingConditionsAllRef.processingConditionsVisible = true
            let data = {
                interface:'spcyreturnUpperFlowJob',
                sqsxid:row.sqsxid,
                nextNodeDbrList:row.nextNodeDbrList,
                nextNode:row.nextNode,
                jobid:row.jobid,
                isBlr:false,
                isThhj:true,
                isXyb:false,
                headerLeftTitle:'退回',
                headerCenterTitle:'药品生产查验--技术审评',
                isNew:true,
                NoViewBlr:true,
            }
            this.processingData = data
            this.$refs.processingConditionsAllRef.getData(data)
        },
        interfaceSuccessful(){
            this.$refs.acceptanceRegistrationRef.searchEvent()
        },
        successReturn(){
            this.$refs.acceptanceRegistrationRef.searchEvent()
        },
    }
}
</script>
